<template>
  <u-popup :show="show" @close="close" :round="8">
    <view class="view" :class="{vh80:show}">

      <scroll-view :scroll-y="true">
        <image class="close" src="@/static/icon/close.png" @click="close" />
        <XPicture class="avatar" defaultImgName="avatar" :url="info?.head_img" />
        <div class="nickname">{{info?.username}}</div>
        <div class="list">
          <div class="item">
            <div class="label" @click="openDetail">申请时间</div>
            <div class="value">{{info?.create_time}}</div>
          </div>

          <div class="item">
            <div class="label">签到次数</div>
            <div class="value">{{info?.sign_num || 0}}次</div>
          </div>
          <div class="item">
            <div class="label">最近一次签到时间</div>
            <div class="value">{{info?.last_sign_date}}</div>
          </div>

          <!-- <div class="item">
            <div class="label">所有签到时间</div>
            <div class="open" @click="openCard">
              <span v-if="showCard">收起</span>
              <span v-else>展开</span>
              <image class="icon" :class="{showCard:showCard}" src="@/static/icon/arrow-down.png" />
            </div>
          </div> -->
          <!-- <div class="qd_time" :class="{unShow: !showCard}" :style="styles">
            <div class="qd_item" v-for="item of 8">2024-08-12 00:10:01</div>
          </div> -->

          <div class="item">
            <div class="label">今日是否签到</div>
            <div class="value">{{info?.is_sign==1?'已签到':'未签到'}}</div>
          </div>
          <div class="item">
            <div class="label">是否违规</div>
            <div class="value">{{info?.is_violate == 2?'已违规':'正常'}}</div>
          </div>
          <div class="item" v-if="info?.is_violate == 2">
            <div class="label">违规原因</div>
            <div class="value">{{info.reason}}</div>
          </div>

          <div class="item">
            <div class="label">报名信息</div>
            <div class="bmxx" @click="openDetail">查看报名信息>></div>
            <!-- 点击后弹窗和报名信息的弹窗一致 -->
          </div>

        </div>
        <div class="block"></div>

        <div class="action" v-if="true">
          <u-button type="warning" class="btn" @click="refuse">
            <image src="@/static/icon/warning.png" />用户违规
          </u-button>
          <u-button type="primary" class="btn" @click="signIn">
            <image src="@/static/icon/calendar.png" />签到
          </u-button>
        </div>
      </scroll-view>
    </view>

  </u-popup>
  <Question ref="lModal" />
  <detailDrawer1 ref="Popup1" />

</template>

<script setup>
import { computed, ref } from "vue"
import detailDrawer1 from '../apply/detailDrawer.vue'

const stylePopup = { height: '80vh' }

const show = ref(false)
const showCard = ref(true)
const data = ref({})
const lModal = ref()
const info = ref({
  account: "",
  account_id: "",
  age: "",
  change_time: "",
  class_grade: "",
  con_sign: null,
  create_time: "",
  grade: "",
  head_img: "",
  id: 0,
  id_card: "",
  img: "",
  is_sign: "",
  is_violate: " 1",
  key: "1",
  last_sign_date: "",
  manage_id: "",
  manage_name: "",
  nickname: "",
  order_num: 0,
  reader_id: "",
  reason: "",
  remark: "",
  school: "",
  score: 0,
  sex: 0,
  sign_num: 0,
  status: 0,
  tel: "",
  title: "",
  unit: "",
  user_id: 1,
  username: "",
  violate_reason: null,
  violate_time: null,
  wechat_id: 1,
  wechat_number: "",
})

const styles = computed(() => {
  return { height: 64 * 8 + 'rpx' }
})


// 签到
function signIn() {
  lModal.value.open({ tip: '是否确定签到？' })
}
// 拒绝
function refuse() {
}
function openCard() {
  if (showCard.value) {
    showCard.value = false
  } else {
    showCard.value = true
  }
}

function close() {
  show.value = false
}
function open(item) {
  info.value = JSON.parse(JSON.stringify(item))
  show.value = true
}


const Popup1 = ref()
function openDetail() {
  info.value.showAction = false
  Popup1.value.open(info.value)
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.vh80 {
  min-height: 90vh;
}
.view {
  padding: 30rpx;
  position: relative;
  background: #fff;
  border-radius: 16rpx;
  .avatar {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10rpx;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
  }
  .close {
    position: absolute;
    right: 30rpx;
    top: 30rpx;
    width: 40rpx;
    height: 40rpx;
  }
}
.nickname {
  margin: 16rpx 0;
  text-align: center;
}
.list {
  display: flex;
  flex-direction: column;
  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64rpx;
    z-index: 1;
    background: #fff;
    .label {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #333333;
    }
    .value {
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: right;
      color: #666666;
    }
    .bmxx {
      font-size: 24rpx;
      font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      text-decoration: underline;
      text-align: right;
      color: #468eff;
    }
  }
}
.action {
  margin-top: 30rpx;
  display: flex;
  padding: 0 30rpx;
  gap: 30rpx;
  .btn {
    height: 88rpx;
    border-radius: 16rpx;
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
.open {
  color: #468eff;
  display: flex;
  align-items: center;
  .icon {
    width: 30rpx;
    height: 30rpx;
    transition: all 0.6s;
  }
  .showCard {
    transform: rotate(-180deg);
  }
}
.qd_time {
  background: #f3f3f3;
  border-radius: 0px 0px 16rpx 16rpx;
  transition: all 0.6s;
  will-change: height;
  z-index: 0;
  opacity: 1;
  .qd_item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 64rpx;
    font-size: 28rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: right;
    color: #666666;
    margin-right: 68rpx;
    position: relative;
  }
  .qd_item::after {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%);
    right: -40rpx;
    width: 12rpx;
    height: 12rpx;
    background: #468eff;
    border-radius: 50%;
  }
  .qd_item:not(:first-child):before {
    position: absolute;
    content: "";
    bottom: 35rpx;
    right: -35rpx;
    width: 2rpx;
    height: 60rpx;
    background: #468eff;
    border-radius: 50%;
  }
}
.unShow {
  height: 0 !important;
  overflow: hidden;
  opacity: 0 !important;
}
.block {
  height: 200rpx;
  z-index: 1;
  background: #fff;
}
</style>